<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
      id="pdfRef"
    >
      <el-form-item label="是否匿名" prop="isAnonymity">
        <el-select v-model="formData.isAnonymity" placeholder="请选择是否匿名(0实名举报,1匿名举报)" :disabled="true">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.IS_ANONYMITY)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            :disabled="true"
          />
        </el-select>
      </el-form-item>
      <el-divider class="custom-divider" content-position="left" v-if = 'formData.isAnonymity == 0'>举报人信息:</el-divider>
      <!-- <el-form-item label="举报人id(实名匿名都要获取到)" prop="userId">
        <el-input v-model="formData.userId" placeholder="请输入举报人id(实名匿名都要获取到)" />
      </el-form-item> -->
      <el-form-item label="姓名" prop="reportName"  v-if = 'formData.isAnonymity == 0'  >
        <el-text >{{formData.reportName}}</el-text>
      </el-form-item>
      <el-form-item label="身份证号" prop="reportIdentityCard" v-if = 'formData.isAnonymity == 0' >
        <el-text >{{formData.reportIdentityCard}}</el-text>
        <!-- <el-input v-model="formData.reportIdentityCard" :disabled="true" /> -->
      </el-form-item>
      <el-form-item label="居住地" prop="reportAddress" v-if = 'formData.isAnonymity == 0' >
        <el-text >{{formData.reportAddress}}</el-text>
        <!-- <el-input v-model="formData.reportAddress" :disabled="true" /> -->
      </el-form-item>
      <el-form-item label="联系方式" prop="reportTel" v-if = 'formData.isAnonymity == 0' >
        <el-text >{{formData.reportTel}}</el-text>
        <!-- <el-input v-model="formData.reportTel" :disabled="true" /> -->
      </el-form-item>


      <el-divider class="custom-divider" content-position="left">被举报人信息:</el-divider>
      <el-form-item label="姓名" prop="beReportedName">
        <el-text >{{formData.beReportedName}}</el-text>
        <!-- <el-input v-model="formData.beReportedName" :disabled="true" /> -->
      </el-form-item>
      <el-form-item label="单位" prop="beReportedUnit">
        <el-text >{{formData.beReportedUnit}}</el-text>
        <!-- <el-input v-model="formData.beReportedUnit" :disabled="true" /> -->
      </el-form-item>
      <el-form-item label="职务" prop="beReportedOffice">
        <el-text >{{formData.beReportedOffice}}</el-text>
        <!-- <el-input v-model="formData.beReportedOffice" :disabled="true" /> -->
      </el-form-item>
      <el-form-item label="级别" prop="beReportedLevel">
        <el-text >{{formData.beReportedLevel}}</el-text>
        <!-- <el-input v-model="formData.beReportedLevel" :disabled="true" /> -->
      </el-form-item>
      <el-divider class="custom-divider" content-position="left" >举报信息:</el-divider>
      <el-form-item label="标题" prop="title">
        <el-text >{{formData.title}}</el-text>
        <!-- <el-input v-model="formData.title" :disabled="true"/> -->
      </el-form-item>
      <!-- <el-form-item label="举报类别(0涉黑涉恶线索1涉法涉诉线索2干警违纪违法线索3反邪教组织线索)" prop="category">
        <el-radio-group v-model="formData.category">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.CATEGORY)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="内容" prop="content">
        <el-text >{{formData.content}}</el-text>
      </el-form-item>
      <!-- <el-form-item label="举报类别" prop="categoryDetail">
        <el-input v-model="formData.categoryDetail" />
      </el-form-item> -->

      <el-form-item label="举报类别" prop="categoryDetail">
        <el-select v-model="formData.categoryDetail"  :disabled="true">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CATEGROY_DETAIL_FOUR)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            :disabled="true"
          />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="详细内容" prop="content">
        <Editor v-model="formData.content" height="150px" />
      </el-form-item> -->
      <!-- <el-form-item label="内容" prop="content">
        <Editor v-model="formData.content" height="150px" />
      </el-form-item> -->

      <el-form-item label="受理情况" prop="acceptSituation">
        <el-radio-group v-model="formData.acceptSituation" :disabled="true">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.ACCEPT_SITUATION)"
            :key="dict.value"
            :label="dict.value"
            
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="线索情况" prop="clueSituation">
        <el-radio-group v-model="formData.clueSituation" :disabled="true">
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.CLUE_SITUATION)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="受理情况说明" prop="illustrate">
        <el-input v-model="formData.illustrate" placeholder="请输入受理情况说明" :disabled="true"/>
      </el-form-item>
    </el-form>
    
    <!-- 子表的表单 -->
    <el-tabs v-model="subTabsName">
      <el-tab-pane label="投诉文件" name="reportingFile">
        <ReportingFileForm ref="reportingFileFormRef" :reporting-id="formData.id" />
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">导 出</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ReportingApi, ReportingVO } from '@/api/system/reporting'
import ReportingFileForm from './components/ReportingFileForm.vue'
import { htmlPdf } from "@/utils/htmlToPDF.js"  
/** 投诉信息 表单 */
defineOptions({ name: 'ReportingForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  isAnonymity: undefined,
  userId: undefined,
  reportName: undefined,
  reportIdentityCard: undefined,
  reportAddress: undefined,
  reportTel: undefined,
  beReportedName: undefined,
  beReportedUnit: undefined,
  beReportedOffice: undefined,
  beReportedLevel: undefined,
  title: undefined,
  category: undefined,
  categoryDetail: undefined,
  content: undefined,
  fileId: undefined,
  acceptSituation: undefined,
  clueSituation: undefined,
  illustrate: undefined,
  remark: undefined,
  create: undefined,
  isSee: undefined,
  state: undefined,
  stateOne: undefined,
  stateTwo: undefined,
  staeThree: undefined,
  stateFour: undefined,
  stateFive: undefined,
})
const formRules = reactive({}) // 表单验证规则
const formRef = ref() // 表单 Ref

/** 子表的表单 */
const subTabsName = ref('reportingFile')
const reportingFileFormRef = ref()

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  
  if (id) {
    formLoading.value = true
    try {
      const response = await ReportingApi.getReporting(id);
      if (response) {
        formData.value = response;
      } else {
        console.error('未获取到数据');
      }
    } catch (error) {
      console.error('获取数据失败:', error);
      message.error('获取数据失败，请重试');
    } finally {
      formLoading.value = false;
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = (name) => {
	  var fileName= '投资评审报告'
	  const fileList = document.getElementsByClassName('pdfRef')   // 很重要
	  htmlPdf(fileName, document.querySelector('#pdfRef'), fileList)
	}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    isAnonymity: undefined,
    userId: undefined,
    reportName: undefined,
    reportIdentityCard: undefined,
    reportAddress: undefined,
    reportTel: undefined,
    beReportedName: undefined,
    beReportedUnit: undefined,
    beReportedOffice: undefined,
    beReportedLevel: undefined,
    title: undefined,
    category: undefined,
    categoryDetail: undefined,
    content: undefined,
    fileId: undefined,
    acceptSituation: undefined,
    clueSituation: undefined,
    illustrate: undefined,
    remark: undefined,
    create: undefined,
    isSee: undefined,
    state: undefined,
    stateOne: undefined,
    stateTwo: undefined,
    staeThree: undefined,
    stateFour: undefined,
    stateFive: undefined,
  };
  formRef.value?.resetFields();
}
</script>

<style scoped>
/* 根据需要添加样式 */
.custom-divider {
    font-weight: bold; /* 加粗文本 */
    border-width: 2px; /* 设置分割线的宽度 */
     border-top: 3px solid black; /* 将分割线部分加粗 */
}
</style>
